<template>
    <div class="mainContent">
        <div class="tableBox">
            <div class="down">
                <el-button v-if="auth.isAddData" type="primary" @click="updateDevice('add')" size="small">添加智能电表</el-button>
            </div>
            <div class="tableList">
                <el-table :data="list">
                    <el-table-column prop="name" label="设备名称" class-name="padding_left"></el-table-column>
                    <el-table-column prop="sn" label="设备编码"></el-table-column>
                    <el-table-column prop="platformName" label="硬件厂商"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" v-if="auth.isEdit||auth.isDelete">
                        <template slot-scope="scope">
                            <el-button style="color:#00AFFB" @click="updateDevice('edit', scope.row)" type="text" size="small" v-if="auth.isEdit">编辑</el-button>
                            <el-popconfirm title="确定删除此设备吗？" @confirm="delDevice(scope.row.id)">
                                <el-button slot="reference" style="color:red" type="text" size="small" v-if="auth.isDelete">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page
                        v-if="total>0"
                        style="margin-top: 20px;text-align: center;"
                        :current.sync="pageNum"
                        :total="total"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        @on-change="pageChange">
                    </Page>
                </div>
            </div>
        </div>
    
        <!-- 新增/编辑弹窗 -->
        <el-dialog :title="updateType==='add'?'添加设备':'编辑设备'" :visible.sync="updateVisible" width="25%">
            <el-form ref="form" :model="updateMsg"  :rules="rules" label-width="80px">
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="updateMsg.name" :maxlength="20" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="设备编码" prop="sn">
                    <el-input v-model="updateMsg.sn" :maxlength="100" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="硬件厂商" prop="platform">
                    <el-select v-model="updateMsg.platform" placeholder="请选择硬件厂商">
                    <el-option v-for="item in platformList" :value="item.platform" :key="item.platform" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false" size="small">取消</el-button>
                <el-button type="primary" @click="updateClick" size="small">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getEnergyDeviceList, getHdcPlatformList, addDevice, editDevice, delDevice } from "@/api/energy.js";

export default {
    data() {
        return {
            deviceType: 14,
            deptId: "",
            list: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,

            updateVisible: false,
            updateType: "add",
            updateMsg: {},
            rules: {
                name: [
                    { required: true, message: '请输入设备名称', trigger: 'blur' }
                ],
                sn: [
                    { required: true, message: '请输入设备编码', trigger: 'blur' }
                ],
                platform: [
                    { required: true, message: '请选择硬件厂商', trigger: 'change' }
                ]
            },

            //硬件平台列表
            platformList: [],
            auth:{
                isAddData:false,
                isEdit: false,
                isDelete:false
            }, 
            btnList:[] //权限列表
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.getList();
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getList();
        this.getHdcPlatformListFn();
        this.btnList = JSON.parse(localStorage.getItem("arr"));//localStorage当中的arr项存取的是按钮权限列表
        this.initAuth() //初始化权限
    },
    methods: {
        /* 按钮权限 */
        initAuth(){
            this.auth.isAddData = this.btnList.includes('energy/water/add')
            this.auth.isEdit = this.btnList.includes('energy/water/edit')
            this.auth.isDelete = this.btnList.includes('energy/water/delete')
        },

        /* 获取列表数据 */
        getList() {
            let params = {
                deptId: this.deptId,
                type: this.deviceType,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }
            getEnergyDeviceList(params).then((res) => {
                if (res.code == 200) {
                    let list = res.data.list || [];
                    for (let i = 0; i < list.length; i++) {
                        for (let j = 0; j < this.platformList.length; j++) {
                            if (list[i].platform === this.platformList[j].platform) {
                                list[i].platformName = this.platformList[j].name;
                            }
                        }
                    }
                    this.list = list;
                    this.total = res.data.total;
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch((error) => {
                console.log(error);
            });
        },
        
        /* 获取硬件平台列表 */
        getHdcPlatformListFn() {
            let params = {
                deviceType: this.deviceType
            }
            getHdcPlatformList(params).then((res) => {
                if (res.code == 200) {
                    this.platformList = res.data.list || [];
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch((error) => {
                console.log(error);
            });
        },

        /* 翻页 */
        pageChange(index) {
            this.pageNum = index;
            this.getList();
        },

        /* 新增/编辑 */
        updateDevice(type, rows) {
            this.updateType = type
            if(type==="add"){
                this.updateMsg = {}
            }else{
                this.updateMsg = JSON.parse(JSON.stringify(rows))
            }
            this.updateVisible = true
        },

        /* 提交 */
        updateClick(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let param = {
                        deptId: this.deptId,
                        name: this.updateMsg.name,
                        sn: this.updateMsg.sn,
                        deviceType: this.deviceType,
                        platform: this.updateMsg.platform
                    }
                    if(this.updateType==="add"){
                        addDevice(param).then(res=>{
                            if(res.code==200){
                                this.$message({ message: '添加成功', type: 'success' })
                                this.updateVisible = false
                                this.getList()
                            }else{
                                this.$message({ message: res.msg, type: 'error' })
                            }
                        })
                    }else{
                        param.id = this.updateMsg.id 
                        editDevice(param).then(res=>{
                            if(res.code==200){
                                this.$message({ message: '编辑成功', type: 'success' })
                                this.updateVisible = false
                                this.getList()
                            }else{
                                this.$message({ message: res.msg, type: 'error' })
                            }
                        })
                    }
                }
            })
        },

        /* 删除 */
        delDevice(id){
            delDevice(id).then(res=>{
                if(res.code==200){
                    this.$message({ message: '删除成功', type: 'success' })
                    this.getList()
                }else{
                    this.$message({ message: res.msg, type: 'error' })
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
@import "./../../assets/style/evn/msgModal.scss";

.mainContent {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .tableBox {
        width: 100%;
        padding:20px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #fff;
        .down{
            margin-bottom: 20px;
        }
    }
}
</style>
